<template>
    <div>
        <div class="historythot">
            <div class="his-hot">
                <div class="top">
                    <h4>历史记录</h4>
                    <van-icon name="delete-o" />
                </div>
                <div class="bom">
                    <van-tag v-for="(item,index) in historyKeywordList" :key="index" plain type="default">{{ item }}</van-tag>
                </div>
            </div>
            <div class="his-hot">
                <div class="top">
                    <h4>热门搜索</h4>
                </div>
                <div class="bom">
                    <!-- 根据is_hot 判断是否是红色 -->
                    <van-tag v-for="(item,index) in hotKeywordList" :key="index" plain :type="item.is_hot?'danger':'default'">{{ item.keyword }}</van-tag>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    // 脚手架项目中的父传子 可以在接收的时候使用 props:[自定义属性,自定义属性]
    props:['historyKeywordList','hotKeywordList'],
    data () {
        return {
        }
    }
}
</script>
 
<style lang = "less" >
    .his-hot{
        background-color: #fff;
        margin-bottom:.2rem;
        padding:.1rem;
        .top{
            display: flex;
            justify-content: space-between;
        }
        .bom{
            margin-top:.1rem;
            .van-tag{
                margin-right:.1rem;
                margin-bottom:.1rem;
            }
        }
    }
</style>